import { Component, ReactNode } from "react"

import { RouteComponentProps } from "react-router-dom"

import * as api from "../../api/index"

//类型的声明
type Iprops = RouteComponentProps<{ id: string }>
//状态的声明

type Istate<t extends any> = {
    data: Array<t>
}

//声明后台数据中的某些数据

type item = {
    productInfo2?: string,
    productImg2:any
}

//声明后台数据的思路 不要声明后台所有的数据 用到哪个属性 就声明哪个

class Detail extends Component<Iprops, Istate<item>> {
    state = {
        data: [{
            productInfo2: "",
            productImg2:''
        }]
    }
    componentDidMount(): void {
        // 获取动态的路由的id
        // console.log(this.props);

        let productid: string = this.props.match.params.id;
        api.getDetail(productid)
            .then((res: any) => {
                // console.log(res)
                this.setState({
                    data: res.result
                })
            })
    }

    render(): ReactNode {
        // console.log(this.state)
        let productInfo2 = (this.state.data[0] as item)?.productInfo2
        let productImg2 = (this.state.data[0] as item)?.productImg2
        let regExp = /(?<=imgurl=)[^'"]*/
        let src=productImg2?.match(regExp)
        // console.log(src);
        
        return (
            <fieldset>
                <legend>详情页</legend>
                <img src={src} alt="" width={150} />
                <h1>{productInfo2}</h1>
            </fieldset >
        )
    }
}

export default Detail